<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>添加面要素</title>
  <link rel="stylesheet" href="../../dist/hmap.css">
  <style type="text/css">
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .menu {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      z-index: 2;
    }

    .base-button {
      height: 30px;
      line-height: 30px;
      background: #1b9de8;
      color: #ffffff;
      border-radius: 6px;
      border: 1px solid #bfcbd9;
      padding: 0 10px;
      box-shadow: 0 4px 10px rgba(73, 127, 255, .42);
      transition: .3s;
    }

    .base-button:hover {
      cursor: pointer;
      border-color: #1b9de8;
      color: #ffffff;
    }
  </style>
</head>
<body>
<div id="map">
  <div class="menu">
    <button class="base-button" id="addFeature">添加单面</button>
    <button class="base-button" id="addFeatures">添加多面</button>
    <button class="base-button" id="removeFeatureByLayerName">通过layerName移除面</button>
    <button class="base-button" id="removeFeatureById">通过id移除面</button>
    <button class="base-button" id="highLightFeatureById">通过id高亮面</button>
    <button class="base-button" id="unHighLightFeatureById">通过id取消高亮面</button>
  </div>
</div>
<script src="../../dist/hmap.js"></script>
<script src="../assets/lib/JSLite.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var Map = new HMap({
      target: 'map',
      controls: {
        scaleLine: true
      },
      view: {
        center: [113.53450137499999, 34.44104525],
        projection: 'EPSG:4326',
        zoom: 5, // resolution
      },
      baseLayers: [
        {
          layerName: 'Google',
          isDefault: true,
          layerType: 'Google',
          layerUrl: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
        }
      ]
    });
    var polygons = []
    Map.on('loadMapSuccess', function (event) {
      if (event) {
        $.ajax({
          url: '../assets/json/polygons.json',
          type: 'GET',
          dataType: 'json',
          // 如果请求成功时执行回调
          success: function (res) {
            polygons = res['data']['features']
          },
          // 如果请求失败时执行回调
          error: function (error) {
            console.log(error)
          }
        })
      }
    });
    $('#addFeature').on('click', function () {
      Map.addPolygon(polygons[0], {
        layerName: 'polygon',
        zoomToExtent: true,
        style: {
          stroke: {
            strokeColor: '#1b9de8',
            strokeWidth: 3
          },
          fill: {
            fillColor: 'rgba(27, 157, 232, 0.2)'
          }
        },
        selectStyle: {
          stroke: {
            strokeColor: '#D81E06',
            strokeWidth: 3
          },
          fill: {
            fillColor: 'rgba(27, 157, 232, 0.2)'
          }
        }
      })
    });
    $('#addFeatures').on('click', function () {
      Map.addPolygons(polygons, {
        layerName: 'polygons',
        zoomToExtent: true,
        style: {
          stroke: {
            strokeColor: '#1b9de8',
            strokeWidth: 3
          },
          fill: {
            fillColor: 'rgba(27, 157, 232, 0.2)'
          }
        },
        selectStyle: {
          stroke: {
            strokeColor: '#D81E06',
            strokeWidth: 3
          },
          fill: {
            fillColor: 'rgba(27, 157, 232, 0.2)'
          }
        }
      })
    });
    $('#removeFeatureByLayerName').on('click', function () {
      Map.removeFeatureByLayerName('polygons')
    });
    $('#removeFeatureById').on('click', function () {
      Map.removeFeatureById('1')
    });
    $('#highLightFeatureById').on('click', function () {
      Map.highLightFeature('1')
    });
    $('#unHighLightFeatureById').on('click', function () {
      Map.unHighLightFeature('1')
    });
  })
</script>
</body>
</html>
